var curPageIdx = 1;

var curMatchJson = [
    {'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
    {'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'},
	{'vedio': '../image/history/record1.png', 'title': '梅花绚丽绽放'}
];
  
var inners1 = '';
var inners2 = '';

for(var i = 0; i < curMatchJson.length; i++){
	if(i % 2 == 0){
		 inners1 += '<div id="vedioContent_'+(i+1)+'" class="swiper" style="background-image: url('+curMatchJson[i]['vedio']+');">\
                    <div class="cover">\
                      <div class="txt">'+curMatchJson[i]['title']+'</div>\
                    </div>\
                    </div>';
	}else{
		inners2 += '<div id="vedioContent_'+(i+1)+'" class="swiper" style="background-image: url('+curMatchJson[i]['vedio']+');">\
                    <div class="cover">\
                      <div class="txt">'+curMatchJson[i]['title']+'</div>\
                    </div>\
                    </div>';
	}
   
}
document.getElementById('matchFirRow').innerHTML = inners1;
document.getElementById('matchSecRow').innerHTML = inners2;



var scw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var curSpace = 30 * scw / 1920;

var containerWidth = function() {

 //第一行图片的个数
  var num1 = '';
  var num2 = '';
  if(curMatchJson.length % 2 == 0){
    num1 = curMatchJson.length / 2;
    num2 = curMatchJson.length / 2;
  }else{
    num1 = curMatchJson.length / 2 + 1;
    num2 = curMatchJson.length / 2;
  }
  //第一行图片的总长度
  getObjById('matchFirRow').style.width = (num1 * 442)/18 + 'em';
  getObjById('matchSecRow').style.width = (num1 * 442)/18 + 'em';
};
containerWidth();

//curSelectedIdx 当前焦点id
// 移动的个数
var moveNum = 0;
function scroll(curSelectedIdx,moveNum,direction){
  var dire = direction;
  removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
  if (dire == 'l') {
    addClass(getObjById('vedioContent_'+(curSelectedIdx-2)),'spArea_active');
  }else if(dire == 'r'){
    addClass(getObjById('vedioContent_'+(curSelectedIdx+2)),'spArea_active');
  }
  
  getObjById('matchFirRow').style.marginLeft = -(24.556*moveNum) + 'em';
  getObjById('matchSecRow').style.marginLeft = -(24.556*moveNum) + 'em';
};



// 设置初始状态
document.onkeydown = focusEvent;
function focusEvent(e){
  // 获取 收藏专题 页 中的当前焦点的id
  var curActiveMatch = document.getElementsByClassName('spArea_active');
  var curSelectedIdx;
  if (curActiveMatch.length != 0) {
    curSelectedIdx = parseInt(curActiveMatch[0].id.replace('vedioContent_',''));	 
  }

  // 获取header中的li的当前焦点的index
  var curActiveLi = document.getElementsByClassName('selected');
  var curLiIdx = parseInt(curActiveLi[0].id.replace('header_li_',''));

  e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
  var curWhichKey = e.which;

  switch(curWhichKey){
    case 13: // 回车/OK
      // 焦点在赛事时
      if (curActiveMatch.length != 0) {
         window.location.href = "../match/album_play.html";
      }else{   }
      break;
    case 27: // ESC
        window.history.back();
        return false;
        break;
    case 37: // 左
      if (curActiveMatch.length == 0) { // 焦点在header
        if (curLiIdx == 1) {
          window.location.href = "Record.html";
          removeClass(getObjById('header_li_'+curLiIdx),'selected');
          addClass(getObjById('header_li_'+(curLiIdx-1)),'selected');
          removeClass(getObjById('header_li_'+curLiIdx),'title_only_foucused_li');
          addClass(getObjById('header_li_'+(curLiIdx-1)),'title_only_foucused_li');
        }
      }else{  // 焦点在收藏专题
        if (curSelectedIdx !== 1 && curSelectedIdx !== 2) {
          if (moveNum>0) {
            moveNum -=1 ;
            scroll(curSelectedIdx,moveNum,'l');
          }else{
            removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
            addClass(getObjById('vedioContent_'+(curSelectedIdx-2)),'spArea_active');
          }
        }
      }
      break;

    case 38: // 上
      if (curActiveMatch.length == 0) {
      }else{
         // 焦点在第二行
        if (curSelectedIdx % 2 == 0) {
          removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          addClass(getObjById('vedioContent_'+(curSelectedIdx-1)),'spArea_active');
        }else{ // 焦点在第一行
          removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          addClass(getObjById('header_li_'+curLiIdx),'title_only_foucused_li');
          getObjById('matchFirRow').style.marginLeft = 0 + 'em';
          getObjById('matchSecRow').style.marginLeft = 0 + 'em';
          moveNum = 0;
        }
      }
      break;

    case 39: // 右
      if (curActiveMatch.length == 0) { // 焦点在header
        if (curLiIdx != 1) {
          removeClass(getObjById('header_li_'+curLiIdx),'header_selected_li');
          addClass(getObjById('header_li_'+(curLiIdx+1)),'header_selected_li');
        }
      }else{
        var row1max = curMatchJson.length % 2 == 0 ? (curMatchJson.length -1) : curMatchJson.length;
        var row2max = curMatchJson.length % 2 == 0 ? curMatchJson.length : (curMatchJson.length -1);
        if (curSelectedIdx !== row1max && curSelectedIdx !== row2max) {
         
          if (curSelectedIdx >= 7 || curSelectedIdx >= 8) {
            if(moveNum < (Math.ceil(curMatchJson.length/2))-4){
              moveNum +=1;
            }
            scroll(curSelectedIdx,moveNum,'r');
          }else{
            if(getObjById('vedioContent_'+(curSelectedIdx+2))){
              removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
              addClass(getObjById('vedioContent_'+(curSelectedIdx+2)),'spArea_active');
            }
          }
        }
      }
      break;
    
    case 40: // 下
      // 首次进入
      if (curActiveMatch.length == 0) {
        addClass(getObjById('vedioContent_1'),'spArea_active');
        removeClass(getObjById('header_li_'+curLiIdx),'title_only_foucused_li');
      }else{
        // 判断是第一行还是第二行
        if (curSelectedIdx % 2 != 0) {
          removeClass(getObjById('vedioContent_'+curSelectedIdx),'spArea_active');
          if (getObjById('vedioContent_'+(curSelectedIdx+1))) {
            addClass(getObjById('vedioContent_'+(curSelectedIdx+1)),'spArea_active');
          }else{
            if(curSelectedIdx==1){
              addClass(getObjById('vedioContent_'+(curSelectedIdx)),'spArea_active');
            }else{
              addClass(getObjById('vedioContent_'+(curSelectedIdx-1)),'spArea_active');
            }
          } 
        }
      }
      break;
  }
}

